<template>
  <view>
    <u-popup
      v-model="visibleJobTask"
      class="rec-bag-pop"
      :border-radius="12"
      mode="center"
      :mask-custom-style="{background: 'rgba(0, 0, 0, 0.6)'}"
      :mask-close-able="true"
      z-index="10081"
      @close="closeEv"
    >
      <view :class="['relative']" style="padding-bottom:100rpx;">
        <image :src="staticHost + '/video_job_popbg.png'" mode="widthFix" style="width:664rpx;"></image>
        
        <view class="task-cont">
          <view class="no-data" v-if="requestDone && !jobList.length">暂无数据</view>
          <view v-for="item in jobList" :key="item.id" class="item-job" @click="toJobDetail(item)">
            <view class="first-row">
              <text class="title">{{ item.title }}</text>
              <view class="sub-info">
                <text>{{ item.salaryTxt }}</text>
                <text class="font14">元/{{ item.salaryunit }}</text>
              </view>
            </view>

            <view class="row-welfare-row" v-if="item.welfarelistnameArr && item.welfarelistnameArr.length">
              <view class="row-welfare-wp">
                <block v-for="(item, idx) in item.welfarelistnameArr" :key="idx" >
                  <text v-if="idx > 0" class="split-line">|</text>
                  <text class="welfare-txt">
                    {{item}}
                  </text>
                  
                </block>
              </view>
            </view>
          </view>
          <view @click="huanyihuan" class="exchange-txt">
            <image :src="staticHost+'/video_reload.png'" class="reload-img"></image>
            <text>换一批</text>
          </view>
        </view>
        <image class="close-ico" :src="staticHost + '/video_pop_close.png'" mode="widthFix" @click="closeEv"></image>
      </view>
    </u-popup>
  </view>
</template>
<script>
// #ifdef H5
import native from '@/static/js/nativeApp';
// #endif
import { staticHost } from '@/setting';
import { QueryJobList } from '../api/index'
import { isH5, isMpAlipay } from '@/utils/platform';

const app = getApp();
let pageList = [];

export default {
  data() {
    return {
      requestDone: false,
      isH5, 
      isMpAlipay,
      staticHost,
      visibleJobTask: false,
      currentPage: 1,
      jobList: []
    };
  },
  created() {
    this.visibleJobTask = true;
    this.queryJobList()
  },
  methods: {
    closeEv() {
      this.visibleJobTask = false
      this.$emit('hideJobTask', false)
    },
    randomFourJob(arr) {
      let newArr = [];
      for (let j = 0; j < 4; j++) {
        let idx = this.getRandomNumber(0, arr.length-1)
        console.log('idx >> ', idx);
        newArr.push(arr[idx])
        arr.splice(idx, 1);
      }
      return newArr;
    },
    getRandomNumber(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    huanyihuan() {
      let jobList = [];
      console.log('pageList> ', pageList);
      if (!pageList.length) {
          this.queryJobList();
      } else {
        jobList = pageList.splice(0, 4);
      }
      this.jobList = jobList;
    },
    queryJobList() {
      this.currentPage = 1;
      QueryJobList({
        page: 1,
        poolId: 4,
        shoped: 1,
        pageSize: 50
      }).then(res => {
        if (res.code == 200 && res.data) {
          pageList = res.data.items || [];

          pageList.forEach(per => {
            per.salaryTxt = this.formatSalary(per);  

            if (per.welfarelistname) {
              per.welfarelistnameArr = per.welfarelistname.split(',')
            } else {
              per.welfarelistnameArr = []
            }

            if (per.settles) {
              per.welfarelistnameArr.push(per.settles)
            }

            if (per.genders == 1) {
              per.welfarelistnameArr.push('限男生')
            } else if (per.genders == 0) {
              per.welfarelistnameArr.push('限女生')
            }

            if (per.education && per.education != '不限') {
              per.welfarelistnameArr.push(per.education)
            }
            if (per.welfarelistnameArr.length > 3) {
              per.welfarelistnameArr.length = 3;
            }

            if (per.cmpname) {
              per.firstLetter = per.cmpname.substr(0, 1)
            }
          });
          if (pageList.length) {
            this.huanyihuan()
          }
          this.requestDone = true;
        }
      })
    },
    formatSalary(item) {
      const { minsalary = 0, maxsalary = 0, salary = 0} = item
      if (salary > 0) {
        return salary / 100
      } else if (minsalary > 0 && maxsalary > 0) {
        return `${minsalary / 100}~${maxsalary / 100}`
      } else if (minsalary > 0) {
        return `最少${minsalary / 100}`
      } else if (maxsalary > 0) {
        return `最多${maxsalary / 100}`
      }
      return ''
    },
    toJobDetail(item) {

      // 触发事件
      if(isH5) {
        const {aplus_queue} = window;
        if(aplus_queue) {
          let { appId, channel, version, deviceId } = app.globalData
          let { userId, userNo, loginId, displayName } = app.globalData.userInfo || {};

          aplus_queue.push({
            action: 'aplus.record',
            arguments: ['video_bell_jobClick', 'CLK', {
              loginId, channel, userId, userNo, displayName, appId, version, deviceId
            }]
          });
        }
      } else {
        let userInfo = app.globalData.userInfo;
        if (userInfo && userInfo.userId) {
          if (this.$uma && this.$uma.trackEvent) {
            this.$uma.trackEvent('video_bell_jobClick', userInfo);
          }
        }
      }

      setTimeout(() => {
        // #ifdef H5
        if (window.native.toNewJobDetail) {
          native.toNewJobDetail({jobId: item.id, seconds:15, detailId: -1, type: 1, golds:0}, (res) => {
          })
        } else {
          native.toJobDetail(item.id, 15, -1, 1)
        }
        // #endif
        
        // #ifndef H5
        this.$navigateTo(`/pages/detail/index?pId=${item.id}`)
        // #endif
      }, 300)
    }
  }
};
</script>
<style lang="scss" scoped>
$onlin_cic_lt_color:#FEC601;

.close-ico {
  width: 72rpx;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateX(-34rpx);
  margin: 0 auto;
  z-index: 10;
}
.task-cont {
  position: absolute;
  background: #fff;
  border-radius: 48rpx;
  top: 260rpx;
  bottom: 126rpx;
  left: 16rpx;
  right: 90rpx;
  padding:24rpx 24rpx 0;
  text-align: center;
  z-index: 10;

  .item-job {
    margin-bottom: 24rpx;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
.first-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 0;

  .title {
    font-size: 32rpx; 
    font-weight: bold;
    flex: 1;
    padding-right: 10rpx;

    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    text-align: left;
  }
  
  .sub-info {
    font-weight: bold;
    color: #F9503E;
    font-size: 36rpx;
  }
}

.row-welfare-row {
  margin-top: 10rpx;
  padding-right: 20rpx;
  align-items: center;
  display: flex;
  justify-content: space-between;

  .row-welfare-wp {
    display: flex;
    flex: 1;
    align-items: center;
    flex-wrap: wrap;
    height: 40rpx;
    overflow: hidden;

    .welfare-txt {
      color: #666666;
      font-size: 24rpx;
    }
    .split-line {
      color: #666666;
      margin: 0 8rpx;
      font-size: 24rpx;
    }
  }
  .job-tp-row {
    min-width: 100px;
    margin-top: -10rpx;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    text {
      font-size: 26rpx;
    }
  }
}
.exchange-txt {
  position: absolute;
  bottom: 12rpx;
  text-align: center;
  left: 0;
  right: 0;
  color: #666666;
  font-size: 26rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  .reload-img {
    width: 36rpx;
    height: 36rpx;
    margin-right: 6rpx;
  }
}
.no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 44px;
    padding-bottom: 44px;
    color: #999;
}
</style>